<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>天截选课系统</title>
    <link href="assets/css/Icons.css" rel="stylesheet">
    <!-- Bootstrap Styles-->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="assets/css/font-awesome.css" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="assets/css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href='assets/css/Sans.css' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="assets/js/Lightweight-Chart/cssCharts.css">
    <link rel="stylesheet" href="assets/plugins/element-ui/index.css" />
    <style>
        #page-wrapper{
            margin: 0;
            padding: 0;
            top:0;
            min-height: 100vh !important;
        }
        #context{
            width: 100%;
            text-align: center;
            margin-top: 100px;
        }
        #context form{
            margin-top: 20px;
            line-height: 30px;
        }
        #context .line{
            font-size: 20px;
            margin-bottom: 20px;
        }
        #context .line label{
            margin-right: 20px;
            width: 100px;
        }
        .input-message{
            border-radius: 10px;
            padding: 5px;
            border: 3px solid black;
        }
        #context .line .input-message{
            margin-left: 20px;
            width: 300px;
            background: white;
        }
        #context .line .input-message[readonly]{
            border: red 3px solid;
        }
        #context .line a{
            color: black;
            cursor: pointer;
            text-decoration: none;
        }
        #context .line a:hover{
            background: red;
            color: white;
        }
        .block{
            display: inline-block;
        }
    </style>
</head>

<body>
<div id="wrapper">
    <div id="page-wrapper">
        <div class="header">
            <h1 class="page-header">
                学生信息
            </h1>
            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li><a href="#">course-message</a></li>
            </ol>
        </div>
        <div id="context">
            <form>
                <div class="line">
                    <label>学生学号</label>
                    <input class="input-message" name="studentId" v-model="user.studentId" readonly>
                </div>

                <div class="line">
                    <label>课程名称</label>
                    <input class="input-message" name="studentName" v-model="user.studentName">
                </div>

                <div class="line">
                    <label>学生电话</label>
                    <input class="input-message" name="phone" v-model="user.phone">
                </div>


                <
                <div class="line">
                    <label>身份证</label>
                    <input class="input-message" name="idCard" v-model="user.idCard">
                </div>


                <div class="line">
                    <label>专业</label>
                    <select class="input-message" name="classId" v-model="user.specialized">
                        <option v-for="(item,index) in specializedList" :value="item.specialized">{{item.specialized}}</option>
                    </select>
                </div>

                <div class="line">
                    <a href="javascript:void(0)" @click="updateCourse(user)" style="display: inline-block;" class="input-message">修改信息</a>
                </div>

            </form>

        </div>
    </div>
</div>
</div>
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/vue.js"></script>
<script src="assets/plugins/element-ui/index.js"></script>
<script>
    var vm = new Vue({
        el:'#wrapper',
        data(){
            return {
                // pickerOptions: {
                //     disabledDate(time) {
                //         return time.getTime() > Date.now();
                //     },
                //     shortcuts: [{
                //         text: '今天',
                //         onClick(picker) {
                //             picker.$emit('pick', new Date());
                //         }
                //     }, {
                //         text: '昨天',
                //         onClick(picker) {
                //             const date = new Date();
                //             date.setTime(date.getTime() - 3600 * 1000 * 24);
                //             picker.$emit('pick', date);
                //         }
                //     }, {
                //         text: '一周前',
                //         onClick(picker) {
                //             const date = new Date();
                //             date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                //             picker.$emit('pick', date);
                //         }
                //     }]
                // },
                value1: '',
                value2: '',
                user:[{
                     "id": "",
                     "courseId": "1",
                     "courseName": "操作系统",
                     "classTime": "2022-09-07T14:11:37",
                     "isDelete": "0",
                     "endTime": "2022-10-07T14:11:37",
                     "number": 0,
                     "maxNumber": 5000,
                     "credits": 2,
                     "time":"",
                     "status": "1",
                     "createTime": "2022-09-07T14:11:37",
                     "createUser": "202200001",
                     "updateTime": "2022-09-07T14:11:37",
                     "updateUser": "202200001",
                     "teacherName": "gg"
                }],
                specializedList:[
                    {

                    }
                ]
            }
        },
        mounted(){
            this.getTeacherList();
            this.getCourse();
        },
        methods:{
            getCourse(){
                var url = location.search;
                var courseId = url.substring(url.indexOf("=")+1);
                let $this = this;

                $.ajax({
                    url: "/student/getStudent",
                    type: "GET",
                    data:{"id":courseId},
                    dataType:"json",
                    async: true,
                    success: function (data) {
                       console.log("data:"+data)
                        $this.user = data.data.studentList;
                    },
                    error: function (data) {
                        vm.$message.error(data.message);
                    }
                })
            },
            getTeacherList(){
                let $this = this;
                console.log(this)
                $.ajax({
                    url: "/specialized/list",
                    type: "GET",
                    async: false,
                    success: function (data) {
                        $this.specializedList = data.data.specializedList
                    },
                    error: function (data) {
                        vm.$message.error("信息获取失败！");
                    }
                })
            },
            updateCourse(courseDTO){
                $.ajax({
                    url: "/course/update",
                    type: "post",
                    contentType:"application/json",
                    data:JSON.stringify(courseDTO),
                    dataType:"json",
                    async: true,
                    success: function (data) {
                        location.href = "table.html";
                        vm.$message.error(data.message);
                    },
                    error: function (data) {
                        console.log(data.message);
                    }
                })
            }
        }
    })
</script>

</body>

</html>